

import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./profile.module.less";
import DragModel from "../DragModel/DragModel";
import profileStore from "./profileStore";
import clsx from "clsx";
import profileIconPNG from "./profileIcon.png";

interface Iprops {
    children?: ReactNode
}
// 剖面图
export default function Profile() {

    const dom = useRef<HTMLDivElement | null>(null);
    const [data, setData] = useState({});
    const [profileDirection, setProfileDirection] = useState(profileStore.profileDirection);
    const [profileSide, setProfileSide] = useState(profileStore.profileSide);

    useEffect(() => {

    }, []);

    useEffect(() => autorun(() => {
        setProfileDirection(profileStore.profileDirection);
        setProfileSide(profileStore.profileSide);
    }, { delay: 10 }), []);

    return (
        <DragModel
            id="pro_file"
            title="剖面图"
            orginLeft={250}
            orginTop={50}
        >
            <div className={styles.profile}>
                <span
                    className={clsx(styles.dirction, profileDirection === "x" && styles.active)}
                    onClick={() => {
                        profileStore.setProfileDirection("x");
                    }}
                >X</span>
                <span
                    className={clsx(styles.dirction, profileDirection === "y" && styles.active)}
                    onClick={() => {
                        profileStore.setProfileDirection("y");
                    }}
                >Y</span>
                <span
                    className={clsx(styles.dirction, profileDirection === "z" && styles.active)}
                    onClick={() => {
                        profileStore.setProfileDirection("z");
                    }}
                >Z</span>
                <img
                    alt=""
                    className={clsx(styles.profileIcon, profileSide === "front" && styles.active)}
                    src={profileIconPNG}
                    onClick={() => {
                        profileStore.triggerProfileSide();
                    }}
                />
            </div>
        </DragModel>
    );

}